<template>
  <div class="view-wrapper">
    <div class="head">
      <span v-if="type==1">订单编号：{{info.orderNo}}</span>
      <span v-if="type==2">订单编号：{{info.withdrawNo}}</span>
      <el-button @click="back">返回列表</el-button>
    </div>
    <div class="detail">
      <div class="detailFrom" v-if="type==1" style="border-bottom:0">
        <div class="from_head boder_bottom">
          <span class="fromtitle">订单概要</span>
          <div class="from_headR1">
            <span>用户支付：</span>
            <span class="num2">¥{{info.payMoney}}</span>
          </div>
        </div>
        <div class="from_detail">
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">
              订单编号：{{info.orderNo}}
            </div>
            <div class="from_detailoneBox">账单分类：{{info.billClassification}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">
              交易流水号：{{info.relevancySerialNo}}
            </div>
            <div class="from_detailoneBox">支付状态：{{info.statusDict}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">订单金额：¥{{info.orderMoney}}</div>
            <div class="from_detailoneBox">使用优惠：¥{{info.discountsMoney}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">实际支付：¥{{info.payMoney}}</div>
            <div class="from_detailoneBox">费率：{{info.merchantRate}}%</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">到账：¥{{info.practicalReceivedMoney}}</div>
            <div class="from_detailoneBox">第三方手续费：¥{{info.platformProcedureFee}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">创建时间：{{info.createTime}}</div>
            <div class="from_detailoneBox">支付时间：{{info.transactionTime}}</div>
          </div>
          <div class="from_detailone">
            <div class="from_detailoneBox" style="width:100%">
              使用核销资产：{{assetName}}
            </div>
          </div>
        </div>
      </div>
      <div class="detailFrom" v-if="type==2" style="border-bottom:0">
        <div class="from_head boder_bottom">
          <span class="fromtitle">订单概要</span>
          <div class="from_headR1">
            <span>申请提现：</span>
            <span class="num1">¥{{info.withdrawMoney}}</span>
            <span>实际放款：</span>
            <span class="num2">¥{{info.practicalMoney}}</span>
          </div>
        </div>
        <div class="from_detail">
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">
              订单编号：{{info.withdrawNo}}
            </div>
            <div class="from_detailoneBox">账单分类：{{info.billType}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">
              交易流水号：{{info.serialNo}}
            </div>
            <div class="from_detailoneBox">备注：{{info.remark}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">申请时间：{{info.createTime}}</div>
            <div class="from_detailoneBox">第三方处理时间：{{info.disposeTime}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">到账时间：{{info.receivedTime}}</div>
            <div class="from_detailoneBox">银行卡：{{info.bankNo}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">商户账号名称：{{info.merchantName}}</div>
            <div class="from_detailoneBox">银行支行名称：{{info.bankBranch}}</div>
          </div>
          <div class="from_detailone">
            <div class="from_detailoneBox boder_right">结算类型：{{info.settlementTypeDict}}</div>
            <div class="from_detailoneBox">结算卡类型：{{info.settleBankTypeDict}}</div>
          </div>
        </div>
      </div>
      <div class="detailFrom" v-if="type==3||type==4||type==11" style="border-bottom:0">
        <div class="from_head boder_bottom">
          <span class="fromtitle">订单概要</span>
          <div class="from_headR1">
            <!-- <span>订单编号：</span>
            <span class="num1">¥{{info.withdrawMoney}}</span>
            <span>账单分类：</span>
            <span class="num2">¥{{info.practicalMoney}}</span> -->
          </div>
        </div>
        <div class="from_detail">
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">订单编号：{{info.orderNo}}</div>
            <div class="from_detailoneBox">账单分类：{{info.billClassification}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">
              交易流水号：{{info.serialNo}}
            </div>
            <div class="from_detailoneBox">支付状态：{{info.statusDict}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">
              订单金额：{{info.orderMoney}}
            </div>
            <div class="from_detailoneBox">费率：{{info.merchantRate}}</div>
          </div>
           <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">
              到账可用余额：{{info.practicalReceivedMoney}}
            </div>
            <div class="from_detailoneBox">存管比例：{{info.govFee}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">创建时间：{{info.createTime}}</div>
            <div class="from_detailoneBox">支付时间：{{info.transactionTime}}</div>
          </div>
        </div>
      </div>
      <!-- 存管释放 -->
      <div class="detailFrom" v-if="type==7" style="border-bottom:0">
        <div class="from_head boder_bottom">
          <span class="fromtitle">基本信息</span>
          <div class="from_headR1"></div>
        </div>
        <div class="from_detail">
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">存管账户：{{info.depositAccount}}</div>
            <div class="from_detailoneBox">商户账号名称：{{info.merchantName}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">交易单号：{{info.relevancyNo}}</div>
            <div class="from_detailoneBox">交易时间：{{info.transactionTime}}</div>
          </div>
          <div class="from_detailone boder_bottom">
            <div class="from_detailoneBox boder_right">释放金额：￥{{info.releaseMoney}}</div>
          </div>
        </div>
      </div>

      <div class="order_particulars" v-if="type==3||type==4">
        <div class="from_head boder_right boder_left boder_top">
          <span class="fromtitle">订单详情</span>
        </div>
        <div class="formTwo">
          <div class="formTwo_lable">
            <div class="formTwo_lablebox9">支付接口公司</div>
            <div class="formTwo_lablebox9">付款来源</div>
            <div class="formTwo_lablebox9">付款方式</div>
            <div class="formTwo_lablebox9">交易明细类型</div>
            <div class="formTwo_lablebox9">交易金额（¥）</div>
            <div class="formTwo_lablebox9">存管金额（¥）</div>
            <div class="formTwo_lablebox9">第三方手续费（¥）</div>
            <div class="formTwo_lablebox9">实际到账金额（¥）</div>
            <div class="formTwo_lablebox9" style="border-right: 0;width: 20%">交易块地址</div>
          </div>
          <div class="formTwo_lable boder_top">
            <div class="formTwo_lablebox9">{{tableinfo.payProviderDict}}</div>
            <div class="formTwo_lablebox9">{{tableinfo.paySource!=''?tableinfo.paySource:'-'}}</div>
            <div class="formTwo_lablebox9">{{tableinfo.payTypeDict!=''?tableinfo.payTypeDict:'-'}}</div>
            <div class="formTwo_lablebox9">{{tableinfo.billTypeDict}}</div>
            <div class="formTwo_lablebox9">{{tableinfo.orderMoney}}</div>
            <div class="formTwo_lablebox9">{{tableinfo.superviseMoney}}</div>
            <div class="formTwo_lablebox9">{{tableinfo.platformProcedureFee}}</div>
            <div class="formTwo_lablebox9">{{tableinfo.payMoney}}</div>
            <div class="formTwo_lablebox9" style="border-right: 0;width: 20%;word-break: break-all;line-height: 1.5;padding: 2px 10px;">{{tableinfo.voucher}}</div>
          </div>
        </div>
      </div>

      <div class="order_particulars" v-if="type!=3&&type!=4&&type!=7">
        <div class="from_head boder_right boder_left boder_top">
          <span class="fromtitle">订单详情</span>
        </div>
        <div class="formTwo">
          <div class="formTwo_lable">
            <div class="formTwo_lablebox">支付接口公司</div>
            <div class="formTwo_lablebox">付款来源</div>
            <div class="formTwo_lablebox">付款方式</div>
            <div class="formTwo_lablebox">交易明细类型</div>
            <div class="formTwo_lablebox">交易金额（¥）</div>
            <div class="formTwo_lablebox">实际到账金额（¥）</div>
            <div class="formTwo_lablebox" style="border-right: 0;width: 20%">交易块地址</div>
          </div>
          <div class="formTwo_lable boder_top">
            <div class="formTwo_lablebox">{{tableinfo.payProviderDict}}</div>
            <div class="formTwo_lablebox">{{tableinfo.paySource!=''?tableinfo.paySource:'-'}}</div>
            <div class="formTwo_lablebox">{{tableinfo.payTypeDict!=''?tableinfo.payTypeDict:'-'}}</div>
            <div class="formTwo_lablebox">{{tableinfo.billTypeDict}}</div>
            <div class="formTwo_lablebox">{{tableinfo.orderMoney}}</div>
            <div class="formTwo_lablebox">{{tableinfo.payMoney}}</div>
            <div class="formTwo_lablebox" style="border-right: 0;width: 20%;word-break: break-all;line-height: 1.5;padding: 2px 10px;">{{tableinfo.voucher}}</div>
          </div>
        </div>
      </div>
      <!-- 存管释放 -->
      <div class="order_particulars" v-if="type == 7">
        <div class="from_head boder_right boder_left boder_top">
          <span class="fromtitle">释放明细</span>
        </div>
        <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:cardType="{ scope }">
          <dict-tag :options="cardTypeList" :value="scope.row.cardType" />
        </template>
        <template v-slot:billType="{ scope }">
          <dict-tag :options="billTypeList" :value="scope.row.billType" />
        </template>
      </ex-table>
      </div>
    </div>
  </div>
</template>
<script>
import { adminMerchantBillInfo,adminGeyBillInfo,merchantBillDepositInfo,merchantBillDepositList } from "@/api/moneyManagement";
import handlePageMixin from "@/mixins/handlePageMixin";
import {
  getSelectList,
} from '@/api/common'
export default {
  name: "billDetail",
  components: {},
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      type:"", //1 用户消费订单 2 提现订单
      orderId:"",//订单id
      relevancyNo:"",//	交易订单号
      info:{},
      tableinfo:{},
      tableData:[],//存管释放列表
      assetName:[],
      releaseDetails:[],//释放明细
      cardTypeList:[], //卡类型列表
      billTypeList:[], //交易类型列表
      tableColumn:[
        { prop: "cardNo",label: "卡号"},
        { label: "卡类型", slot: true, slotName: "cardType"},
        { label: "交易类型", slot: true, slotName: "billType"},
        { prop: "releaseMoney",label: "释放金额(￥)"},
        { prop: "useCardMoney",label: "交易余额"},
      ]
    };
  },
  async mounted() {
    let query = this.$route.query;
    console.log(query)
    this.orderId = query.orderId
    this.type = query.type
    this.relevancyNo = query.relevancyNo
    await this.getSelectList()
    this.getList()
    this.getinfo()
  },
  methods: {
    onSubmit() {
      console.log(this.date);
    },
    handleClick(tab, event) {
      console.log(tab.index);
    },
    lookDetail(e) {
      console.log(e);
    },
    back(){
      // this.$router.push({path:'/moneyManagement/bill-list'});
      this.$router.go(-1);
    },
    // 卡类型列表
    async getSelectList() {
       const dictType = 'asset_card_type,merchant_card_bill_type'
        var res = await getSelectList(dictType)
        this.cardTypeList = res.result[0].dictList;
        this.billTypeList = res.result[1].dictList;
      },
     getinfo() {
      if(this.type == 7){
       const params = {
          relevancyNo:this.relevancyNo,
       };
      this.loading = true;
      merchantBillDepositInfo(params)
        .then((res) => {
           this.info = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
      }else{
        const params = {
        orderId: this.orderId,
        type: this.type
      };
      this.loading = true;
      adminMerchantBillInfo(params)
        .then((res) => {
          this.info = res.result;
          let arr = this.info.assetName
          this.assetName = arr.join("；")
        })
        .finally(() => {
          this.loading = false;
        });
      }
    },
    getList() {
      // 判断是否是存管释放
      if(this.type == 7){
        const params = {
          ...this.pageOptions,
          relevancyNo:this.relevancyNo,
        };
        this.loading = true;
        merchantBillDepositList(params)
          .then((res) => {
            const { total, records} = res.result;
            this.tableData = records;
            this.$refs.table.pageOptions.total = total;
          })
          .finally(() => {
            this.loading = false;
          });
      }else{
        const params = {
          orderId: this.orderId,
          type: this.type
        };
        this.loading = true;
        adminGeyBillInfo(params)
          .then((res) => {
            this.tableinfo = res.result
          })
          .finally(() => {
            this.loading = false;
          });
      }

    },
  },
};
</script>
<style scoped>
.head {
  margin-bottom: 20px;
  font-size: 14px;
  color: #303133;
  padding-bottom: 20px;
}
.head span {
  margin-right: 20px;
}
.detail {
  padding: 20px;
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
}
.detailFrom {
  border: 1px solid #dfe6ec;
}
.fromtitle {
  font-size: 16px;
  font-weight: bold;
}
.from_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f2f6fc;
  padding: 10px 20px;
}
.from_headR {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.from_headR1 {
  margin-left: 20px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #303133;
}
.num1 {
  color: #13ce66;
  font-weight: bold;
  margin-right: 30px;
}
.num2 {
  color: #e64242;
  font-weight: bold;
}
.from_detailone {
  display: flex;
  align-items: center;
}
.from_detailoneBox {
  padding: 20px 20px;
  width: 50%;
  font-size: 14px;
  color: #303133;
}
.formTwo{
  border: 1px solid #dfe6ec;
}
.formTwo_lable{
  display: flex;
  align-items: center;
}
.formTwo_lablebox{
  width: calc(100% / 7);
  border-right: 1px solid #dfe6ec;
  font-size: 14px;
  color: #303133;
  height: 46px;
  line-height: 46px;
  padding: 0px 0px 0px 20px;
}
.formTwo_lablebox9{
  width: calc(100% / 9);
  border-right: 1px solid #dfe6ec;
  font-size: 14px;
  color: #303133;
  min-height: 46px;
  line-height: 46px;
  padding: 0px 0px 0px 20px;
}
.boder_top {
  border-top: 1px solid #dfe6ec;
}
.boder_bottom {
  border-bottom: 1px solid #dfe6ec;
}
.boder_left {
  border-left: 1px solid #dfe6ec;
}
.boder_right {
  border-right: 1px solid #dfe6ec;
}
.order_particulars {
  margin-top: 20px;
}
</style>